<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理员功能测试</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
    .success { background-color: #d4edda; border-color: #c3e6cb; }
    .error { background-color: #f8d7da; border-color: #f5c6cb; }
    button { padding: 10px 15px; margin: 5px; cursor: pointer; }
    input { padding: 8px; margin: 5px; width: 200px; }
    .result { margin-top: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 3px; }
  </style>
</head>
<body>
  <h1>管理员功能测试页面</h1>
  
  <div class="test-section">
    <h3>1. 登录测试</h3>
    <input type="text" id="username" placeholder="用户名" value="admin">
    <input type="password" id="password" placeholder="密码" value="admin123">
    <button onclick="testLogin()">测试登录</button>
    <div id="login-result" class="result"></div>
  </div>

  <div class="test-section">
    <h3>2. 权限测试</h3>
    <button onclick="testAuth()">测试认证状态</button>
    <button onclick="testUploadPermission()">测试上传权限</button>
    <button onclick="testDeletePermission()">测试删除权限</button>
    <div id="auth-result" class="result"></div>
  </div>

  <div class="test-section">
    <h3>3. 游客模式测试</h3>
    <button onclick="testGuestMode()">测试游客模式</button>
    <button onclick="logout()">退出登录</button>
    <div id="guest-result" class="result"></div>
  </div>

  <script>
    let authToken = null;
    let currentUser = null;

    // 测试登录
    async function testLogin() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const resultDiv = document.getElementById('login-result');
      
      try {
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ username, password })
        });
        
        const result = await response.json();
        
        if (result.success) {
          authToken = result.token;
          currentUser = result.user;
          resultDiv.innerHTML = `<div class="success">✅ 登录成功！<br>用户: ${result.user.username}<br>角色: ${result.user.role}<br>令牌: ${result.token.substring(0, 20)}...</div>`;
        } else {
          resultDiv.innerHTML = `<div class="error">❌ 登录失败: ${result.message}</div>`;
        }
      } catch (error) {
        resultDiv.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
      }
    }

    // 测试认证状态
    async function testAuth() {
      const resultDiv = document.getElementById('auth-result');
      
      if (!authToken) {
        resultDiv.innerHTML = '<div class="error">❌ 请先登录</div>';
        return;
      }
      
      try {
        const response = await fetch('/api/auth/verify', {
          headers: { 'Authorization': `Bearer ${authToken}` }
        });
        
        const result = await response.json();
        
        if (result.success) {
          resultDiv.innerHTML = `<div class="success">✅ 认证有效<br>用户: ${result.user.username}<br>角色: ${result.user.role}</div>`;
        } else {
          resultDiv.innerHTML = `<div class="error">❌ 认证失败: ${result.message}</div>`;
        }
      } catch (error) {
        resultDiv.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
      }
    }

    // 测试上传权限
    async function testUploadPermission() {
      const resultDiv = document.getElementById('auth-result');
      
      if (!authToken) {
        resultDiv.innerHTML = '<div class="error">❌ 请先登录</div>';
        return;
      }
      
      try {
        // 创建一个测试文件
        const formData = new FormData();
        formData.append('packageName', '测试音频包');
        
        // 创建空的测试文件
        const testFile = new File(['test'], 'test.wav', { type: 'audio/wav' });
        formData.append('origin', testFile);
        formData.append('basic', testFile);
        formData.append('advance', testFile);
        
        const response = await fetch('/api/upload-audio-package', {
          method: 'POST',
          headers: { 'Authorization': `Bearer ${authToken}` },
          body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
          resultDiv.innerHTML = '<div class="success">✅ 上传权限正常</div>';
        } else {
          resultDiv.innerHTML = `<div class="error">❌ 上传失败: ${result.message}</div>`;
        }
      } catch (error) {
        resultDiv.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
      }
    }

    // 测试删除权限
    async function testDeletePermission() {
      const resultDiv = document.getElementById('auth-result');
      
      if (!authToken) {
        resultDiv.innerHTML = '<div class="error">❌ 请先登录</div>';
        return;
      }
      
      try {
        const response = await fetch('/api/audio-package/test-id', {
          method: 'DELETE',
          headers: { 'Authorization': `Bearer ${authToken}` }
        });
        
        const result = await response.json();
        
        if (response.status === 404) {
          resultDiv.innerHTML = '<div class="success">✅ 删除权限正常（资源不存在是正常的）</div>';
        } else if (result.success) {
          resultDiv.innerHTML = '<div class="success">✅ 删除权限正常</div>';
        } else {
          resultDiv.innerHTML = `<div class="error">❌ 删除失败: ${result.message}</div>`;
        }
      } catch (error) {
        resultDiv.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
      }
    }

    // 测试游客模式
    function testGuestMode() {
      const resultDiv = document.getElementById('guest-result');
      
      // 清除认证信息
      authToken = null;
      currentUser = null;
      
      resultDiv.innerHTML = '<div class="success">✅ 已切换到游客模式<br>现在应该无法访问需要管理员权限的功能</div>';
    }

    // 退出登录
    function logout() {
      authToken = null;
      currentUser = null;
      document.getElementById('login-result').innerHTML = '';
      document.getElementById('auth-result').innerHTML = '';
      document.getElementById('guest-result').innerHTML = '<div class="success">✅ 已退出登录</div>';
    }
  </script>
</body>
</html>
